@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')
    <style>
        .layui-input {
            display: block;
            width: 62%;
            height: 28px;
            padding-left: 10px;
        }
        .layui-form-item .layui-form-label {
            text-overflow: ellipsis;
            /* overflow: hidden; */
            white-space: nowrap;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 105px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }

    </style>
@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>商品基本信息管理</legend>
            </fieldset>
        </div>
        <div class="layui-card-body">
            品牌图片上传: <img src="{{$brandurl  ? : 'http://ccvs-oss.oss-cn-hangzhou.aliyuncs.com/goods/d7NzLMLVweSouv7VZ0mByYjI2fTShEWrjFQUugnC.png'}}" data="5" id="brand" width="50" height="50">
            产地图片上传: <img src="{{$originurl ? : 'http://ccvs-oss.oss-cn-hangzhou.aliyuncs.com/goods/d7NzLMLVweSouv7VZ0mByYjI2fTShEWrjFQUugnC.png'}}" data="6" id="origin" width="50" height="50">
            功效图片上传: <img src="{{$effecturl ? : 'http://ccvs-oss.oss-cn-hangzhou.aliyuncs.com/goods/d7NzLMLVweSouv7VZ0mByYjI2fTShEWrjFQUugnC.png'}}" data="7" id="effect" width="50" height="50">
            <form class="layui-form" action="{{route('goods.configsave')}}">
            <table class="layui-table" lay-filter="brand" >
                <colgroup>
                    <col width="60">
                    <col width="500">
                </colgroup>
                <tbody>
                    <tr>
                        <td>品牌</td>
                        <td>
                            @foreach($brands as $key=>$value)
                                <div class=" layui-form-item layui-input-inline"  id="brand{{$value['id']}}">
                                    <img style="position: relative;" src="{{$value['photo']}}" ><br>
                                    <i class="layui-icon layui-icon-close" style="font-size:20px; color:#f90000;"  data="brand{{$value['id']}}" data-alias="1"  id="{{$value['id']}}" ></i>
                                    <input type="text" width="50" value="{{$value['name']}}"  id="{{$value['id']}}" data="1"  class="layui-input">
                                </div>
                            @endforeach
                                <p class="layui-btn layui-btn-green layui-btn-xs" data="1" id="brand">添加</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="500">
                </colgroup>
                <tbody>
                <tr>
                    <td>产地</td>
                    <td>
                        @foreach($origins as $key=>$value)
                            <div class=" layui-form-item layui-input-inline" id="origin{{$value['id']}}" >
                                <img style="position: relative;" src="{{$value['photo']}}" ><br>
                                <i class="layui-icon layui-icon-close divX" style="font-size:20px; color:#f90000;" data="origin{{$value['id']}}" data-alias="2"  id="{{$value['id']}}"  ></i>
                                <input type="text" width="50" value="{{$value['name']}}" id="{{$value['id']}}"  data="2" class="layui-input">
                            </div>
                        @endforeach
                            <p class="layui-btn layui-btn-green layui-btn-xs" data="2" id="origin">添加</p>
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="500">
                </colgroup>
                <tbody>
                <tr>
                    <td>功效</td>
                    <td>
                        @foreach($effects as $key=>$value)
                            <div class=" layui-form-item layui-input-inline" id="effect{{$value['id']}}">
                                <img style="position: relative;" src="{{$value['photo']}}" ><br>
                                <i class="layui-icon layui-icon-close " style="font-size:20px; color:#f90000;" data="effect{{$value['id']}}" data-alias="3"  id="{{$value['id']}}"  ></i>
                                <input type="text" width="50" value="{{$value['name']}}" id="{{$value['id']}}" data="3" class="layui-input">
                            </div>
                        @endforeach
                            <p class="layui-btn layui-btn-green layui-btn-xs"  data="3" id="effect">添加</p>
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="500">
                </colgroup>
                <tbody>
                <tr class="norms">
                    <td>规格</td>
                    <td>
                        @foreach($norms as $key=>$value)
                            <div class="layui-form-item layui-input-inline " id="norms{{$value['id']}}" >
                                <i class="layui-icon layui-icon-close divX" style="font-size:20px; color:#f90000;" data="norms{{$value['id']}}" data-alias="4"  id="{{$value['id']}}" ></i>
                                <input type="text" width="50" value="{{$value['name']}}" id="{{$value['id']}}"  data="4" class="layui-input">
                            </div>
                        @endforeach
                        <p class="layui-btn layui-btn-green layui-btn-xs" id="addnorms">添加</p>
                    </td>
                </tr>
                </tbody>
                <input type="hidden" id="uploadPhoto2">  </input>
            </table>

                {{--<div class="layui-form-item">--}}
                    {{--<div class="layui-input-block">--}}
                        {{--<button type="reset" class="layui-btn layui-btn-primary">取消</button>--}}
                        {{--<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>--}}
                    {{--</div>--}}
                {{--</div>--}}
            </form>



        </div>
    </div>
@endsection
@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['upload', 'table','layer'],function(){
            var upload = layui.upload;
            var $ = layui.jquery, layer = layui.layer;
            var uploadInst = upload.render({
                elem: '#uploadPhoto' //绑定元素
                ,url:  '/admin/goods/uploadConfig'
                ,field: 'brand' //设定文件域的字段名
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#uploadPhoto-img').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    if(res.code > 0){
                        $("#photo").val(res.data);
                        return layer.msg('上传成功');
                    }
                    return layer.msg('上传失败');
                }
            });
            $(document).on('click','#brand,#effect,#origin',function(){
                var id = $(this).attr("data");
                var name = "";
                if(id==1 || id ==5){
                    name = "品牌";
                }else if(id ==2 || id ==6){
                    name = "产地";
                }else if(id ==3 || id ==7){
                    name = "功效";
                }
                var html =
                        '<div class="layui-card">'+
                        '    <div class="layui-card-body">'+
                        '        <form class="layui-form" id="layui-form">'+
                        '            <div class="layui-form-item">'+
                        '                <label class="layui-form-label">'+
                        '                    输入'+ name +'名称'+
                        '                </label>'+
                        '                <div class="layui-input-block" >'+
                        '                    <input type="text" name="name" id="name" lay-verify="required" value="" class="layui-input" >'+
                        '                </div>'+
                        '            </div>'+
                        '            <div class="layui-form-item">'+
                        '                <label class="layui-form-label" id="uploadbrand" >添加相应图片</label>'+
                        '                <div class="layui-input-block" >'+
                        '                    <div class="layui-upload">'+
                        '                        <div class="layui-upload-list">'+
                        '                            <button type="button"  id="uploadPhoto"  >'+
                        '                                <img class="layui-upload-img" id="uploadPhoto-img" width="80" height="80" src="http://ccvs-oss.oss-cn-hangzhou.aliyuncs.com/goods/d7NzLMLVweSouv7VZ0mByYjI2fTShEWrjFQUugnC.png">'+
                        '                            </button>'+
                        '                            <input type="hidden" id ="photo" name="photo" value="" lay-verify="required">'+
                        '                            <input type="hidden" id = "type" name="type" value="'+ id +'" >'+
                        '                        </div>'+
                        '                    </div>'+
                        '                </div>'+
                        '            </div>'+
                        '            <div class="layui-form-item">'+
                        '                <div class="layui-input-block"> {{csrf_field()}}'+
                        '                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>'+
                        '                    <button type="submit" class="layui-btn" id="addconfig" >添加</button>'+
                        '                </div>'+
                        '            </div>'+
                        '        </form>'+
                        '    </div>'+
                        '</div>';
                var banner =
                        '<div class="layui-card">'+
                        '    <div class="layui-card-body">'+
                        '        <form class="layui-form" id="layui-form">'+
                        '            <div class="layui-form-item">'+
                        '                <label class="layui-form-label" id="uploadbrand" >添加'+ name +'图片</label>'+
                        '                <div class="layui-input-block" >'+
                        '                    <div class="layui-upload">'+
                        '                        <div class="layui-upload-list">'+
                        '                            <button type="button"  id="uploadPhoto"  >'+
                        '                                <img class="layui-upload-img" id="uploadPhoto-img" width="80" height="80" src="http://ccvs-oss.oss-cn-hangzhou.aliyuncs.com/goods/d7NzLMLVweSouv7VZ0mByYjI2fTShEWrjFQUugnC.png">'+
                        '                            </button>'+
                        '                            <input type="hidden" id ="photo" name="photo" value="" lay-verify="required">'+
                        '                            <input type="hidden" id = "type" name="type" value="'+ id +'" >'+
                        '                        </div>'+
                        '                    </div>'+
                        '                </div>'+
                        '            </div>'+
                        '            <div class="layui-form-item">'+
                        '                <div class="layui-input-block"> {{csrf_field()}}'+
                        '                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>'+
                        '                    <button type="submit" class="layui-btn" id="addconfig" >添加</button>'+
                        '                </div>'+
                        '            </div>'+
                        '        </form>'+
                        '    </div>'+
                        '</div>';
                var content = "";
                if(id== 1 || id == 2 || id ==3 ){
                    content = html;
                }
                if(id== 5 || id == 6 || id ==7 ){
                    content = banner;
                }
                layer.open({
                    type: 1
                    ,content:content
                    ,area: ['400px', '300px']
                    ,resize:true
                });
            });
            $('body').on('click',"#addconfig",function(){
                var photo = $('#photo').val();
                var type = $('#type').val();
                var name = $('#name').val();
                if(name==""){
                    layer.msg('请输入名称');
                    return false;
                }
                if(photo==""){
                    layer.msg('请等待图片上传成功后再点击');
                    return false;
                }

                $.ajax({
                    url: '{{route('goods.configsave')}}'
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {name:name,id:type,photo:photo}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon: 1});
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                    , complete: function(){
                        layer.closeAll();
                        window.location.reload();
                    }
                });
                return false;
            });
            $(document).on('click','#uploadPhoto-img',function(){
                $("#uploadPhoto2").click();
            });
             upload.render({
                elem: '#uploadPhoto2' //绑定元素
                ,url:  '/admin/goods/uploadConfig'
                ,field: 'brand' //设定文件域的字段名
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#uploadPhoto-img').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    if(res.code > 0){
                        $("#photo").val(res.data);
                        return layer.msg('上传成功');
                    }
                    return layer.msg('上传失败');
                }
            });

            $(".layui-input").change(function(){//修改文字
                var id = $(this).attr("id");
                var type = $(this).attr("data");
                var value = $(this).val();
                if(value == ""){
                    layer.msg('请输入名称');
                    return false;
                }
                $.ajax({
                    url: '{{route('goods.configchange')}}'
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {
                        id:id
                        ,type:type
                        ,value:value
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon: 1,time:1000});
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }

                });
            });
//            规格
            $(document).on('click','#addnorms',function(obj){
                layer.open({
                    type: 1
                    ,area: ['400px', '200px']
                    ,content: '<div class="layui-card">\n' +
                '    <div class="layui-card-body">\n' +
                    '           <form class="layui-form" id="layui-form" action="/admin/goods/config" method="post">\n'+
                '        <div class="layui-form" lay-filter="">\n' +
                '            <div class="layui-form-item">\n' +
                '                <label class="layui-form-label">规格名称</label>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input type="text" name="name" id="normsname"  class="layui-input"> \n' +
                '                    <input type="hidden" name="id" id="typeid"  value="4" > \n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-form-item">\n' +
                '                <label class="layui-form-label"></label>\n' +
                '                    <button type="submit" class="layui-btn layui-btn-green layui-btn-xs"   id="addsubmit" >添加</button>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '</div>'
                    ,resize:false
                });
            });
            $('body').on('click','#addsubmit',function(){
                var name = $('#normsname').val();
                var type = $('#typeid').val();
                if(name==""){
                    layer.msg('请输入规格名称');
                    return false;
                }
                layer.closeAll('page');
                $.ajax({
                    url: '{{route('goods.configsave')}}'
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {name:name,id:type}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon: 1,time:2000});
                            window.location.reload();
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                });
                return false;
            });

            $(document).on('click','.layui-icon-close',function(obj){
                var data = $(this).attr('data');
                var type = $(this).attr('data-alias');
                var id = $(this).attr('id');
                layer.confirm('确认删除该属性吗?', function(index){
                    $.ajax({
                        url: '{{route('goods.configdel')}}'
                        , type: 'POST'
                        , dataType: 'json'
                        , data: {
                            id:id
                            ,type:type
                        }
                        , success: function (ret) {
                            if (ret.hasOwnProperty('code') && ret.code == 200) {
                                layer.msg(ret.message,{icon: 1});
                                $('#'+data+'').remove();
                                return false;
                            }
                            layer.msg(ret.message,{icon:2});
                        }
                    });

                });
            });
//

        });
    </script>

@endsection